<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>增删改查4</title>
    <style>
        .content {
            width: 1300px;
        }

        ul {
            overflow: hidden;
            width: 1300px;
            margin-top: 10px;
        }

        ul li {
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            float: left;
            border: 1px solid #000;
            list-style: none;
        }

        * {
            margin: 0;
            padding: 0;

        }

        a {
            text-decoration: none;
        }

        #userID,
        #userAge {
            width: 20px;
        }

        body {
            background-color: rgba(37, 33, 34, 0.3);
        }

        h2 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="content">
        <h2>增删改查4</h2>
        编号：<input type="text" id="userID">
        姓名：<input type="text" id="userName">
        性别：男：<input type="radio" name="sex" value="0" checked>
        女：<input type="radio" name="sex" value="1">
        年龄：<input type="text" id="userAge" maxlength="3">
        电话：<input type="text" id="userPhone" maxlength="11">
        邮箱：<input type="text" id="userEmail" maxlength="15">
        <button onclick="add()">提交</button>
        <input type="reset" onclick="reset()">
    </div>
    <div class="center">
        <ul>
            <li>姓名</li>
            <li>性别</li>
            <li>年龄</li>
            <li>电话</li>
            <li>邮箱</li>
            <li>操作</li>
        </ul>
    </div>
    <div id="show">

    </div>
    <script>
        var data = [{
            id: 0,
            name: "哈登",
            sex: 0,
            age: 32,
            phone: "18327614096",
            email: "1278703962@qq.com",
            delete: false,
        }, {
            id: 1,
            name: "勒布朗",
            sex: 1,
            age: 37,
            phone: "13886356965",
            email: "12156465962@qq.com",
            delete: false,
        }];
        function updata_show() {
            var str = "";
            var show = document.getElementById("show");

            for (var i = 0; i < data.length; i++) {
                data[i].id=i;
                if (data[i].sex == 0) {
                    data[i].sex = "男";
                } else if (data[i].sex == 1) {
                    data[i].sex = "女";
                }
                str += '<ul>' +
                    '<li>' + data[i].name + '</li>' +
                    '<li>' + data[i].sex + '</li>' +
                    '<li>' + data[i].age + '</li>' +
                    '<li>' + data[i].phone + '</li>' +
                    '<li>' + data[i].email + '</li>' +
                    '<li><a href="#" onclick="del(' + i + ')">删除</a>||<a href="#" onclick="updata(' + i + ')">修改</a></li>' +
                    '</ul>'
            }
            show.innerHTML = str;
        }

        function del(i) {
            data.splice(i, 1);
            updata_show();
        }
        function add() {
            // var userID = document.getElementById("userID").value;
            if (!document.getElementById("userID").value) {
                userName = document.getElementById("userName").value;
                var gender;
                userSex = document.getElementsByName("sex");
                for (var i = 0; i < userSex.length; i++) {
                    if (userSex[i].checked == true) {
                        gender = userSex[i].value;
                    }
                }
                userAge = document.getElementById("userAge").value;
                userPhone = document.getElementById("userPhone").value;
                userEmail = document.getElementById("userEmail").value;
                data.push({
                    name: userName,
                    sex: gender,
                    age: userAge,
                    phone: userPhone,
                    email: userEmail,
                })
            } else {
                // data[userID].id=document.getElementById("userID").value;
                data[document.getElementById("userID").value].name = document.getElementById("userName").value;
                data[document.getElementById("userID").value].age = document.getElementById("userAge").value;
                data[document.getElementById("userID").value].phone = document.getElementById("userPhone").value;
                data[document.getElementById("userID").value].email = document.getElementById("userEmail").value;
                var gender;
                userSex = document.getElementsByName("sex");
                for (var i = 0; i < userSex.length; i++) {
                    if (userSex[i].checked == true) {
                        gender = userSex[i].value;
                    }
                }
                data[document.getElementById("userID").value].sex = gender;
            }
            updata_show();
        }
        function updata(i) {
            document.getElementById("userID").value = data[i].id;
            console.log(data[i].id);
            document.getElementById("userName").value = data[i].name;
            document.getElementById("userAge").value = data[i].age;
            document.getElementById("userPhone").value = data[i].phone;
            document.getElementById("userEmail").value = data[i].email;

            if (data[i].sex == "男") {
                document.getElementsByName("sex")[0].checked == true;
            } else if (data[i].sex == "女") {
                document.getElementsByName("sex")[1].checked == true;
            }
            updata_show();
        }
        //清空
        function reset() {
            document.getElementById("userID").value = "";
            document.getElementById("userName").value = "";
            document.getElementById("userAge").value = "";
            document.getElementById("userPhone").value = "";
            document.getElementById("userEmail").value = "";
        }

        //封装一个判断男女

        updata_show();
    </script>
</body>

</html>